<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box{font-size: 20px;}
  </style>
</head>
<body>
  <input type="button" value="成功" id="btn1">
  <input type="button" value="失败" id="btn2">
  <input type="button" value="警告" id="btn3">
  <input type="button" value="信息" id="btn4">
  <input type="button" value="默认" id="btn5">
</body>
<script>


  // 单例模式的弹出框

  // 需求：

  // 模拟alert，增强


  // alert({
  //   // 弹出框的文本，可选，空字符
  //   text: "xxx执行完成",
  //   // 弹出框类型：success，error，warning，info，可选，default
  //   type: "success",
  //   // 关闭方式：auto自动关闭，click点击关闭，可选，auto
  //   closeType:"auto",
  //   // 如果自动关闭的延迟时间，可选，2000
  //   timeout: 4000,
  //   // 关闭弹出框时严执行的功能，可选，不执行
  //   close:function(){},
  //   // 弹出框的位置：top，center，bottom，可选，top
  //   position: "center"
  // })

  // const a1 = alert();
  // const a2 = alert();
  // console.log(a1)
  // console.log(a1 === a2)


  const alert = (function(){
    // 单例模式的对象
    const obj = {};
    // 单例模式下的元素
    obj.ele = document.createElement("dialog");
    document.body.appendChild(obj.ele);
    // 将来重复执行的部分
    return function({ text="", type="default", closeType="auto", timeout=2000, close, position="top", id="alert" } = {}){
      // 解构赋值处理参数及默认值
      // console.log( text, type, closeType, timeout, close, position )
      
      // 默认设置
      obj.ele.id = id;
      obj.ele.style.display = "block";
      obj.ele.innerText = text;

      // 根据传入的状态，决定弹出框的样式
      let color = "#ccc";
      switch(type){
        case "success": color="green";break;
        case "error": color="red";break;
        case "warning": color="yellow";break;
        case "info": color="blue";break;
      }
      obj.ele.style.color = color;
      obj.ele.style.borderColor = color;

      // 关闭方式
      if(closeType === "auto"){
        obj.ele.onclick = null;
        clearTimeout(obj.t);
        obj.t = setTimeout(()=>{
          obj.ele.style.display = "none";
          close && close();
        }, timeout)
      }else{
        clearTimeout(obj.t);
        obj.ele.onclick = function(){
          obj.ele.style.display = "none";
          close && close();
        }
      }

      // 弹出框的位置
      if(position === "bottom"){
        obj.ele.style.bottom = 0;
        obj.ele.style.top = "auto";
      }else if(position === "center"){
        obj.ele.style.bottom = 0;
        obj.ele.style.top = 0;
      }else{
        obj.ele.style.bottom = "auto";
        obj.ele.style.top = 0;
      }

      return obj;
    }
  })();


  // 弹出框的重点：
    // 单例模式的使用场景
    // 功能的设计思想
      // 利用参数，决定交互或样式或功能
    // 分析是否足够详细


  $("#btn1").onclick = function(){
    alert({
      text: "xxx执行完成",
      type: "success",
      closeType:"click",
    })
  }

  $("#btn2").onclick = function(){
    alert({
      text: "xxx执行失败",
      type: "error",
      closeType:"auto",
      timeout: 4000,
      position: "bottom"
    })
  }

  $("#btn3").onclick = function(){
    alert({
      text: "xxx执行完成,但有隐患",
      type: "warning",
      closeType:"click",
      close:function(){
        document.body.style.background = "#66f";
      },
    })
  }

  $("#btn4").onclick = function(){
    alert({
      text: "helloworld",
      type: "info",
      position: "center",
    })
  }

  $("#btn5").onclick = function(){
    alert({
      text: "默认",
      id: "box"
    })
  }




  function $(s){
    return document.querySelector(s)
  }





  
</script>
</html>